<template>
    <div class="fixed right-0 top-24 bg-transparent rounded-tl-xl rounded-bl-xl overflow-hidden">
        <main class="flex flex-col select-none overflow-hidden bg-transparent text-white">
            <!--  顶栏 -->
            <div class="flex flex-row justify-between w-full z-10 p-2 bg-zinc-800/80">
                <Icon
                    class="p-2 hover:bg-zinc-600 rounded-md transition-colors"
                    @click="store.toggleController"
                    title="图层开关"
                >format_list_bulleted</Icon>
                <div v-show="store.show.layer" class="px-4 flex-grow p-1">图层</div>

                <Icon
                    v-show="store.show.layer"
                    class="p-2 hover:bg-zinc-600 rounded-md transition-colors"
                    title="多选图层"
                    @click="store.selected.multi = !store.selected.multi"
                    :class="[store.selected.multi ? 'text-white' : 'text-zinc-500']"
                >view_module</Icon>
                <Icon
                    v-show="store.show.layer"
                    title="添加图层"
                    class="p-2 hover:bg-zinc-600 rounded-md transition-colors"
                    @click="createLayer"
                >add</Icon>
            </div>
            <!-- 图层 -->
            <transition name="fade">
                <Layers v-show="store.show.layer" class="z-10"></Layers>
            </transition>
        </main>
        <!-- 模糊透明背景 -->
        <footer class="absolute top-0 left-0 backdrop-blur-sm h-full w-full bg-zinc-800/70"></footer>
    </div>
</template>

<script lang="ts" setup>
import Layers from './layers.vue';
import Icon from '@konghayao/vue-material-icons';
import { hub } from '../canvas/hub';
import { useControllerStore } from '../Controller/Controller';
const createLayer = () => {
    hub.emit('createLayer')
}
const store = useControllerStore()

</script>